/* 上边主部分 */
.index-first {
    height: 673px;
}

.index-top {
    position: relative;
    width: 1245px;
    height: 610px;
    top: 63px;
    margin: 0 auto;
    /* perspective: 500px; */
    transform-style: preserve-3d;
}

/* 左边图片 */
.index-top_pic1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 418px;
    transform-style: preserve-3d;
}

.index-top_pic1over,
.index-top_pic2over {
    animation: indextop_picrotate1 300ms 0s forwards;
}

.index-top_pic1leave,
.index-top_pic2leave {
    animation: indextop_picrotate2 300ms 0s forwards;
}

@keyframes indextop_picrotate1 {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-90deg);
    }
}

@keyframes indextop_picrotate2 {
    0% {
        transform: rotateY(-90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

/* 左边前面图 */
.index-top_picfront1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 418px;
    background-image: url(../images/index/image\ 1.png);
    background-size: cover;
    transform: translateZ(120px);
}

/* 左边右面图 */
.index-top_picright1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 418px;
    transform: translateX(120px) rotateY(90deg);
    /* transform-origin: right; */
}

.index-top_picright1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #242424;
}

/* 左边右面图文字 */
.index-top_pic1word {
    margin-top: 15px;
    margin-left: 10px;
    height: 105px;
    width: 100%;
}

.index-top_picword1 {
    width: 100%;
    height: 33px;
}

.index-top_picword2 {
    width: 100%;
    height: 24px;
    margin: 5px 0 10px 0;
    font-size: 14px;
    color: #AAA;
}

.index-top_picword3 {
    width: 100%;
    height: 24px;
    font-size: 12px;
    color: #AAA;
}

.index-top_picto {
    position: relative;
    bottom: -25px;
    margin-top: 24px;
    width: 102px;
    height: 33px;
}

.index-top_picto::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 10px;
    width: 10px;
    height: 10px;
    background-image: url(../images/index/home3/typical\ album1-arrow.png);
    background-repeat: no-repeat;
}

/* 右边图片 */
.index-top_pic2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 240px;
    height: 418px;
    transform-style: preserve-3d;
}

/* 右边前面图 */
.index-top_picfront2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 240px;
    height: 418px;
    background-image: url(../images/index/image\ 2\ fixed.png);
    background-size: cover;
    transform: translateZ(120px);
}

/* 右边右面图 */
.index-top_picright2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 240px;
    height: 418px;
    transform: translateX(120px) rotateY(90deg);
}

.index-top_picright2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #242424;
}

/* 中间字母区域 */
.index-top_eason {
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: 218px;
    height: 223px;
}

.index-top_eason:hover .e3,
.index-top_eason:hover .a2,
.index-top_eason:hover .s1 {
    animation: jump 500ms 0s ease;
}

.index-top_eason:hover .e4,
.index-top_eason:hover .a1 {
    animation: jump 500ms 100ms ease;
}

.index-top_eason:hover .o1 {
    animation: jump 500ms 50ms ease;
}

@keyframes jump {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.n1 {
    /* transform: translate(10px, -5px); */
    animation: index-top_n 2s 0s linear infinite;
}

.n2 {
    transform: scale(0.1, 0.1);
    /* display: none; */
    animation: index-top_n 2s 1s linear infinite;
}

@keyframes index-top_n {
    0% {
        display: block;
        transform: translate(70px, 70px) scale(0.5, 0.5);
    }

    100% {
        display: block;
        transform: translate(-80px, -80px) scale(1.5, 1.5);
    }
}

/* 介绍文字 */
.index-top_word {
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 424px;
    height: 127px;
    line-height: 28px;
}

/* 更多 */
.index-top_more {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 44px;
    border: 1px solid #fff;
    border-radius: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 44px;
}

/* 内容部分 */
.index-second {
    height: 4363px;
}

.index-con {
    position: relative;
    top: 410px;
    width: 1484px;
    height: 3953px;
}

/* eason字母部分 */
.index-con>span {
    display: inline-block;
    width: 126px;
    height: 134px;
    background-repeat: no-repeat;
}

.index-con_lettere1 {
    position: absolute;
    top: 0;
    left: 137px;
    background-image: url(../images/index/EASON/E.png);
}

.index-con_lettera1 {
    position: absolute;
    top: 264px;
    left: 400px;
    background-image: url(../images/index/EASON/A.png);
}

.index-con_letters1 {
    position: absolute;
    top: 575px;
    left: 690px;
    background-image: url(../images/index/EASON/S.png);
}

.index-con_lettero1 {
    position: absolute;
    top: 874px;
    right: 372px;
    background-image: url(../images/index/EASON/O.png);
}

.index-con_lettern1 {
    position: absolute;
    top: 1171px;
    right: 66px;
    background-image: url(../images/index/EASON/N.png);
}

.index-con_lettere2 {
    position: absolute;
    top: 1694px;
    right: 66px;
    background-image: url(../images/index/EASON/E.png);
}

.index-con_lettera2 {
    position: absolute;
    top: 1990px;
    right: 372px;
    background-image: url(../images/index/EASON/A.png);
}

.index-con_letters2 {
    position: absolute;
    top: 2332px;
    left: 690px;
    background-image: url(../images/index/EASON/S.png);
}

.index-con_lettero2 {
    position: absolute;
    top: 2605px;
    left: 400px;
    background-image: url(../images/index/EASON/O.png);
}

.index-con_lettern2 {
    position: absolute;
    top: 2866px;
    left: 137px;
    background-image: url(../images/index/EASON/N.png);
}

/* 专辑部分 */
.index-con_album {
    position: absolute;
    top: 40px;
    right: 20px;
    width: 525px;
    height: 630px;
}

.index-con_album svg {
    position: absolute;
    right: 40px;
    top: 125px;
}

/* 专辑文字 */
.index-con_albumtop {
    position: relative;
    width: 100%;
    height: 105px;
}

.index-con_albumword {
    position: absolute;
    left: 43px;
    font-size: 36px;
}

.index-con_albumwordarrow {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 95px;
    width: 40px;
    height: 40px;
    background-image: url(../images/index/ALBUM/album-arrow-2.png);
    background-repeat: no-repeat;
}

/* 专辑图片 */
.index-con_albumimgbox {
    position: relative;
    width: 423px;
    height: 424px;
    overflow: hidden;
}

.index-con_albumarrowl {
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    background-image: url(../images/index/ALBUM/album-arrow-1.png);
    background-repeat: no-repeat;
    z-index: 1;
}

/* .index-con_albumarrowl::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
} */

.index-con_albumarrowr {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    background-image: url(../images/index/ALBUM/album-arrow-2.png);
    background-repeat: no-repeat;
    z-index: 1;
}

/* .index-con_albumarrowr::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
} */

.index-con_albumlunbo {
    position: absolute;
    top: 0;
    left: 0;
    width: 2115px;
}

.index-con_albumlunbo li {
    float: left;
}

/* 首页新闻 */
.index-con_news1 {
    position: absolute;
    top: 567px;
    left: 0;
    width: 435px;
    height: 945px;
}

.index-con_newswordall {
    position: relative;
    width: 350px;
    height: 102px;
    margin-left: 26px;
    margin-right: 49px;
}

.index-con_newsword {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 36px;
}

.index-con_newswordarrow {
    position: absolute;
    top: 5px;
    right: 0;

}

.index-con_news1all,
.index-con_news2all,
.index-con_news3all {
    margin-left: 26px;
    margin-top: 40px;
}

.index-con_newsword1,
.index-con_newsword2,
.index-con_newsword3 {
    width: 356px;
    margin-top: 40px;
    font-size: 24px;
    font-weight: 600;
}

.index-con_news1title,
.index-con_news2title,
.index-con_news3title {
    margin-top: 15px;
    margin-bottom: 40px;
}

.index-con_news1intro,
.index-con_news2intro,
.index-con_news3intro {
    color: #666;
}

.index-con_news1all svg {
    position: absolute;
    top: 105px;
    left: 0;
}

.index-con_news1all svg rect,
.index-con_news2all svg rect,
.index-con_news3all svg rect {
    display: none;
}

/* 新闻2 */
.index-con_news2 {
    position: absolute;
    top: 1030px;
    left: 593px;
    width: 356px;
    height: 724px;
}

.index-con_news2all svg {
    position: absolute;
    top: 0px;
    left: 0;
}


/* 新闻3 */
.index-con_news3 {
    position: absolute;
    top: 1710px;
    left: 64px;
    width: 356px;
    height: 742px;
}

.index-con_news3all svg {
    position: absolute;
    top: 0px;
    left: 0;
}

/* 首页巡演 */
.index-con_concert {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1393px;
    height: 1600px;
}

.index-con_concerttop {
    position: absolute;
    top: 2275px;
    right: 12px;
}

.index-con_concertword {
    margin-right: 152px;
    font-size: 36px;
}

.index-con_concertwordarrow img {
    margin-bottom: 20px;
}

/* 巡演1 */
.index-con_concert1 {
    position: absolute;
    right: 20px;
    top: 2410px;
}

.index-con_concert2 {
    position: absolute;
    right: 478px;
    top: 2809px;
}

.index-con_concert3 {
    position: absolute;
    left: 130px;
    top: 3209px;
}

.index-con_concertword1,
.index-con_concertword2,
.index-con_concertword3 {
    width: 355px;
    margin-top: 40px;
}

.index-con_concertword1,
.index-con_concertword2,
.index-con_concertword3 {
    font-size: 24px;
    font-weight: 600;
}

.index-con_concert1title1,
.index-con_concert2title1,
.index-con_concert3title1 {
    margin-top: 15px;
    margin-bottom: 10px;
}

.index-con_concert1title2,
.index-con_concert2title2,
.index-con_concert3title2 {
    margin-bottom: 35px;
}

.index-con_concert1intro,
.index-con_concert2intro,
.index-con_concert3intro {
    color: #666;
}

/* 线段特效 */

@keyframes begin {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes over {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 2180;
    }
}

@keyframes albumover {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 532;
    }
}